<template>
	<view class="card_chart">
		<uni-card margin="6px">
			<uni-segmented-control styleType="text" :current="current" :values="items"
				@clickItem="onClickItem"></uni-segmented-control>
			<view class="content">
				<!-- 日期选择 -->
				<view class="date_mouth">
					<view class="date_mouth_left" @click="onLeftArrow">
						<text class="iconfont icon-zuojiantou"></text>
					</view>
					<view class="date_mouth_center" ref="dateMouthCenter" @click="selectDate">
						<text>{{dateValue}}</text>
						<text class="iconfont icon-rili"></text>
					</view>
					<view class="date_mouth_right" @click="onRightArrow">
						<text class="iconfont icon-youjiantou1"></text>
					</view>
				</view>
				<!-- charts表格 -->
				<view class="charts-box">
					<view class="title">
						<text class="word">{{current===0?'销售总额':'当年销售总额'}}:</text>
						<text class="count">{{current===0?monthCount:yearCount}}</text>
					</view>
					<view class="charts">
						<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch='true' />
					</view>
				</view>
			</view>
		</uni-card>

		<!-- 弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="onPopupChange">
			<!-- 日期滑动选择 -->
			<picker-view ref="picker" v-if="visible" :indicator-style="indicatorStyle" :value="value"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column v-show="current===0">
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const categories = []
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				categories.push(i)
			}
			return {
				items: ['总', '年'],
				current: 0,
				years,
				year,
				months,
				categories,
				month,
				monthCount: 0, // 截止目前销售总额
				yearCount: 0, //当年销售总额
				value: [9999, month - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				chartData: {
					categories: [],
					series: []
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel: false,
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					title: {
						name: '元'
					},
					xAxis: {
						disableGrid: true,
						itemCount: 3,
					},
					yAxis: {
						showTitle: true,
						data: [
							// 多Y轴配置
							{
								title: "万元", // 当前Y轴标题（需要上面showTitle设置为true）
								min: 0, // 当前Y轴起始值（默认数据中的最小值）
							},
						],
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		computed: {
			dateValue() {
				return this.year
			}
		},
		methods: {
			//年月切换
			onClickItem(e) {
				if (this.current === e.currentIndex) {
					return
				}
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex === 0) {
					this.getChartsData(1)
				} else if (e.currentIndex === 1) {
					this.getChartsData(2)
				}
			},
			//左箭头
			onLeftArrow() {
				if (this.current === 1) {
					if (this.year <= this.years[0]) {
						return
					}
					this.year--
					this.getChartsData(2)
				}
			},
			//右箭头
			onRightArrow() {
				if (this.current === 1) {
					if (this.year >= this.years[this.years.length - 1]) {
						return
					}
					this.year++
					this.getChartsData(2)
				}
			},
			//年月选择器
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
			},
			//弹出选择器
			selectDate() {
				if (this.current == 1) {
					this.$refs.popup.open("bottom")
				}
			},
			//选择器显示隐藏
			onPopupChange(e) {
				if (!e.show) {
					if (this.current === 0) {
						this.getChartsData(1)
					} else if (this.current === 1) {
						this.getChartsData(2)
					}
				}
			},
			//获取表格数据
			async getChartsData(type = 1) {
				this.chartData = {
					categories: [],
					series: []
				}
				const token = uni.getStorageSync('Token')
				let params = {}
				if (type === 1) { // 总，按年
					params = {
						token,
					}
				} else if (type === 2) {
					params = {
						token,
						signedTime: `${this.year}-01-01`,
					}
				}
				let res = await post(api.SaleAmountEntities, params)
				let data = new Array(31).fill(0)
				let categories = []
				res.data.forEach((item, key) => { // item是map键值对
					data[key] = Object.values(item)[0] / 10000
					// 组装x和y轴
					categories.push(Object.keys(item)[0])
				})
				this.chartData.categories = categories
				if (this.current === 0) {
					this.monthCount = data.reduce((p, n) => p + n)
					this.monthCount = this.monthCount.toFixed(2)
				} else if (this.current === 1) {
					this.yearCount = data.reduce((p, n) => p + n)
					this.yearCount = this.yearCount.toFixed(2)
				}
				this.chartData.series = [{
					name: "销售额（万元）",
					data
				}]
			},
		},
		mounted() {
			this.getChartsData(1)
		}
	}
</script>

<style scoped lang='scss'>
	@import '../../../static/css/SaleAmount.css';
</style>